<template>
  <div>
    <div class="container-cart">
      <!-- product left -->
      <div class="side-bar col-md-3">
        <!--preference -->
        <div class="left-side">
          <el-cascader
            @change="listBookInfo"
            v-model="searchCondition.typeId"
            placeholder="请选择图书类别"
            :options="allBookTypes"
            :props="props"
            clearable
            style="width: 100%;"
          ></el-cascader>
        </div>
        <!-- // preference -->
        <div class="search-hotel">
          <form onsubmit="return false">
            <input
              type="search"
              placeholder="请输入图书名"
              name="search"
              v-model="searchCondition.bookShowname"
            />
            <input type="submit" @click="listBookInfo" value="搜索" />
          </form>
        </div>
        <div class="range">
          <h3 class="shopf-sear-headits-sear-head">
            <span>价 格 区 间</span>
          </h3>
          <el-input
            @change="listBookInfo"
            placeholder="最低价格"
            style="width: 50%; float: left;"
            v-model="searchCondition.minPrice"
          >
          </el-input>
          <el-input
            @change="listBookInfo"
            placeholder="最高价格"
            style="width: 50%;"
            v-model="searchCondition.maxPrice"
          >
          </el-input>
        </div>

        <div class="Ranking_List11">
          <div class="Ranking_List_Title">图书收藏榜TOP10</div>
          <div v-for="(item, i) in collectRankList" :key="i">
            <div v-if="i != 0" class="book_Title" @click="showSingleInfo(item)">
              <div v-if="i != 9" class="book_Title_color">{{ i + 1 }}</div>
              <div
                v-if="i == 9"
                class="book_Title_color"
                style="background-color: #c0c0c0;"
              >
                10
              </div>
              <div class="book_Title_name">
                <a>{{ item.bookShowname }}</a>
              </div>
              <i class="total">{{ item.score }}</i>
            </div>
            <div v-if="i == 0" class="book_name" style="display: block;">
              <div class="book_img" @click="showSingleInfo(item)">
                <img :src="item.bookImage" style="width: 84px;" />
              </div>
              <div class="book_Introduction_min">
                <p class="book_Introduction_min_p" style="margin-top: -4px;">
                  作品名：{{ item.bookShowname }}
                </p>
                <p class="book_Introduction_min_pp" style="margin-top: 12px;">
                  作者：{{ item.bookAuth }}
                </p>
                <p class="book_Introduction_min_ppp" style="margin-top: 4px;">
                  收藏量：{{ item.score }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="left-ads-display col-md-9">
        <div class="wrapper_top_shop">
          <div class="product-sec1">
            <div
              v-for="(item, i) in page.list"
              :key="i"
              class="col-md-3 product-men"
            >
              <div class="product-chr-info chr">
                <div class="thumbnail">
                  <a @click="showSingleInfo(item)">
                    <img
                      :src="item.bookImage"
                      alt=""
                      style="width: 160px;height: 200px;"
                    />
                  </a>
                </div>
                <div class="caption">
                  <h4>{{ item.bookShowname }}</h4>
                  <p>{{ item.bookAuth }}</p>
                  <div class="matrlf-mid">
                    <i
                      v-if="item.collectState == null"
                      style="font-size: 20px;"
                      class="el-icon-star-off"
                      @click="collect(item.bookId)"
                    ></i>
                    <i
                      v-if="item.collectState == 1"
                      style="font-size: 20px;"
                      class="el-icon-star-on"
                      @click="cancelCollect(item.bookId)"
                    ></i>
                    <ul class="price-list">
                      <li>{{ item.bookPrice }}元</li>
                      <li>{{ item.bookPrice + 100 }}元</li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <form>
                    <button
                      @click="addShoppingCar(item.bookId)"
                      type="button"
                      class="chr-cart pchr-cart"
                    >
                      添加到购物车
                      <i class="fa fa-cart-plus" aria-hidden="true"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>

            <div class="clearfix"></div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>

      <div class="clearfix"></div>
      <div style="margin-left: 300px;">
        <el-row style="margin-left: 50px;">
          <el-col :span="5">
            <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageNumChange"
              :current-page="page.current"
              :page-sizes="[1, 4, 8, 12]"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "showUbookInfo",
  data() {
    return {
      loginUser: {},
      page: {},
      searchCondition: {
        bookAuth: "",
        bookPress: "",
        bookShowname: "",
        minPrice: "",
        maxPrice: "",
        bookState: null,
        startPressDate: null,
        endPressDate: null,
        typeId: null,
        pageSize: null,
        pageNum: null
      },
      bookInfoForm:{

      },
      show: false,
      collectRankList: [],
      allBookTypes: [],
      props: {
        expandTrigger: "hover",
        checkStrictly: true,
        value: "typeId",
        label: "typeName",
        children: "children"
      }
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listBookInfo() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.bookInfoForm=JSON.parse(JSON.stringify(this.searchCondition))
      //分页函数
      if (this.bookInfoForm.typeId != null) {
        let num = this.bookInfoForm.typeId.length;
        this.bookInfoForm.typeId = this.bookInfoForm.typeId[num - 1];
      }
      this.bookInfoForm.pageNum = pageNum;
      this.bookInfoForm.pageSize = pageSize;
      this.$http
        .post("/bookInfo/user/selectBookInfos", this.bookInfoForm)
        .then(resp => {
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    listCollectRankList() {
      this.$http.get("/userInfo/user/selectCollectRankList").then(resp => {
        this.collectRankList = resp.data.data;
      });
    },
    collect(bookId) {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http.get("/userInfo/user/collect?bookId=" + bookId).then(resp => {
        alert(resp.data.message);
        this.listBookInfo();
        this.listCollectRankList();
      });
    },
    cancelCollect(bookId) {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http
        .get("/userInfo/user/cancelCollect?bookId=" + bookId)
        .then(resp => {
          alert(resp.data.message);
          this.listBookInfo();
          this.listCollectRankList();
        });
    },
    showSingleInfo(obj) {
      sessionStorage.setItem("singleBookId", obj.bookId);
      this.$router.push("/showSingleBookInfo");
    },
    addShoppingCar(bookId) {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http
        .get("/userInfo/user/addShopping", {
          params: {
            bookId: bookId,
            number: 1
          }
        })
        .then(resp => {
          alert(resp.data.message);
        });
    },
    listAllBookTypes() {
      this.$http.get("/bookType/admin/selectBookTypeTree?typeState=" + 0).then(resp => {
        resp.data.data.splice(resp.data.data.length - 1, 1);
        this.allBookTypes = resp.data.data;
      });
    }
  },
  created() {
    this.loginUser = JSON.parse(sessionStorage.getItem("loginUser"));
    this.listBookInfo();
    this.listCollectRankList();
    this.listAllBookTypes();
  },
  mounted() {
    if (localStorage.getItem("token") != null) {
      this.show = false;
    } else {
      this.show = true;
    }
  }
};
</script>

<style scoped>
@import "../../../assets/login/css/bootstrap.css";
@import "../../../assets/login/css/shop.css";
@import "../../../assets/login/css/checkout.css";
@import "../../../assets/login/css/jquery-ui1.css";
@import "../../../assets/login/css/style.css";
@import "../../../assets/login/css/font-awesome.css";
@import "../../../assets/login/css/index.css";
a {
  color: black;
}
</style>
